<template>
  <div id="regSet" class="setting-box regSet" v-loading="loading">
    <div class="topband">终端卸载密码</div>
    <div class="titleMargin">
      <div class="leftCont">卸载密码</div>
      <div class="leftCont">
        <el-input v-model="data.password" placeholder="请输入密码"></el-input>
        <el-button style="margin-left: 10px" @click="savePass()">保存</el-button>
        <el-button style="margin-left: 10px" @click="data.dialogAsync = true"
          >同步</el-button
        >
      </div>
    </div>
    <el-dialog
      :model-value="data.dialogAsync"
      title="选择分组"
      width="30%"
      :center="true"
      :close-on-click-modal="false"
      @close="
        data.dialogAsync = false;
        groupFlag = false;
      "
      @open="groupFlag = true"
    >
      <div class="config-body">
        <Group v-if="groupFlag" :group="false" @chooseGroup="chooseGroup"></Group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirm()">确定</el-button>
          <el-button
            @click="
              data.dialogAsync = false;
              groupFlag = false;
            "
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import {
  req_getUnloadAuthPass,
  req_setUnloadAuthPass,
  req_asyncUnloadAuthPass,
} from "~/utils/axios/index.js";
import { ElMessage } from "element-plus";

const loading = ref(false);
const groupFlag = ref(false);
const data = reactive({
  password: "",
  dialogAsync: false,
});
onMounted(async () => {
  loading.value = true;
  const { data: res } = await req_getUnloadAuthPass();
  loading.value = false;
  data.password = res.passwordHash;
});
const savePass = () => {
  req_setUnloadAuthPass({ passwordHash: data.password }).then((res) => {
    res.data.succeed ? ElMessage.success("修改成功") : ElMessage.error("修改失败");
  });
};
let categoryList = ref([]);
const chooseGroup = (data) => {
  categoryList.value = data;
};
const confirm = () => {
  req_asyncUnloadAuthPass({ oidList: categoryList.value }).then((res) => {
    res.data.succeed ? ElMessage.success("同步成功") : ElMessage.error("同步失败");
    data.dialogAsync = false;
    groupFlag.value = false;
  });
};
</script>

<style lang="scss" scoped>
.regSet {
  background-color: #fff;
  padding-bottom: 20px;
}

.titleMargin,
.leftCont {
  display: flex;
  align-items: center;
}
.titleMargin {
  padding: 15px 0 0 40px;
}
.leftCont {
  margin-right: 20px;
  font-size: 14px;
}
</style>
